<template>
	<view class="container">
		<div class="p-2">
			<button type="default" @click="edit">新增</button>
		</div>
		<div class="p-2">
			<button type="default" @click="typeAdmin">分类管理</button>
		</div>
		<div>
			<u-dropdown>
				<u-dropdown-item v-model="typeId" title="分类" :options="typeOpt"></u-dropdown-item>
			</u-dropdown>
		</div>
		<div class="p-2">
			<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="books"
				field="name,photoUrl">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="data">
					<u-grid :col="3">
						<u-grid-item v-for="(item, index) in data" :key="index">
							<div @click="handleItemClick(item._id)">
								<u-image height="240rpx" mode="heightFix" :src="item.photoUrl"></u-image>
							</div>
							<div class="p-2 h-16">
								{{item.name}}
							</div>
							<div>
								<button @click="edit(item._id)">编辑</button>
							</div>
						</u-grid-item>
					</u-grid>
				</view>
				<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
			</unicloud-db>
		</div>
		<!-- <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" /> -->
		<m-tab-bar></m-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				typeOpt: [
					{
						label:'全部',
						value:-1
					}
				],
				typeId:0
			}
		},
		created(){
			this.typeInit()
		},
		
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			typeInit(){
				this.$reqFun.req("books", {
					action: 'typeList'
				}).then(res => {
					 var arr= res.result.data.map(o => {
						return {
							value: o._id,
							label: o.name
						}
					});
					this.typeOpt=[...this.typeOpt,...arr]
					// var obj= this.typeList.find(item => {
					//     return item.value === this.formData.type
					// })
					// if(obj){
					// 	this.formData.typeName = obj.label
					// }
				})
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './view?id=' + id + '&act=view'
				})
			},
			edit(id) {
				uni.navigateTo({
					url: typeof(id) === 'string' ? './view?id=' + id + '&act=edit' : './view?act=edit',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							console.log(1111)
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			},
			typeAdmin() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/books-type/list'
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							console.log(2222)
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
